<template>
  <div class="daraBoardMainItem_content flex flex-c">
    <!-- 厢统计 kitchenWaste 厨余垃圾厢 otherGarbage 其他垃圾厢 -->
    <div class="header_box flex flex-c flex-jsb mb-10 p-12">
      <div class="content_title">其他垃圾压缩厢</div>
      <div class="content_valueBox flex flex-ac flex-jsb ">
        <div class="zhi_box flex flex-ac">
          <div class="val">{{ boxStatistics.otherGarbage }}</div>
          <div class="unit ml-10">个</div>
        </div>
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
      </div>
    </div>
    <div class="main_box flex flex-c flex-jsb p-12">
      <div class="content_title">厨余垃圾槽罐厢</div>
      <div class="content_valueBox flex flex-ac flex-jsb ">
        <div class="zhi_box flex flex-ac">
          <div class="val">{{ boxStatistics.kitchenWaste }}</div>
          <div class="unit ml-10">个</div>
        </div>
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
const iconPng = new URL("@/assets/img/png/user.png", import.meta.url).href;
const props = defineProps({
  assetStatisticsObj: {
    type: Object,
    required: false,
    default: {}
  }
});
// 厢统计 kitchenWaste 厨余垃圾厢 otherGarbage 其他垃圾厢
let boxStatistics = ref({
  kitchenWaste: 0,
  otherGarbage: 0, 
})
onMounted(() => { });

onBeforeUnmount(() => { });
watch(() => props.assetStatisticsObj, () => {
 
  if (props?.assetStatisticsObj) {
    if (props.assetStatisticsObj?.boxStatistics) {
      boxStatistics.value.kitchenWaste = props.assetStatisticsObj?.boxStatistics.kitchenWaste
      boxStatistics.value.otherGarbage = props.assetStatisticsObj?.boxStatistics.otherGarbage 
    }
  }
})
</script>
<style lang="scss" scoped>
.daraBoardMainItem_content {
  width: 100%;
  height: 100%;

  .header_box,
  .main_box {
    width: 100%;
    height: 50%;
    background: #fff;
    border-radius: 6px;

    .content_title {
      font-weight: 600;
      font-size: 14px;
      color: #666666;
    }

    .content_valueBox {

      .val {
        font-size: 24px;
        color: #333333;
      }

      .unit {
        font-size: 15px;
        color: #333333d0;
      }
    }

    .content_valueBox {
      .icon {
        width: 35px;
        height: 35px;
        background: linear-gradient(to bottom, #fbdf93, #f09360);
        padding: 6px;
        border-radius: 50%;
        .img {
          width: 90%;
          height: 90%;
          margin: auto;
        }
      }
    }
  }
}
</style>